<template>
  <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false"
    @select="handleSelect">
    <!-- <el-menu-item index=""> -->
    <img style="width: 120px;height: 86px;" src="../../public/images/logo.png" alt="Element logo" />
    <!-- </el-menu-item> -->
    <el-menu-item index="/" class="menu-item1">
      <div class="menu-item-title">首页</div>
      <div class="menu-item-title1">HOME</div>
    </el-menu-item>
    <el-menu-item index="/market" class="menu-item">
      <div class="menu-item-title">剧本集市</div>
      <div class="menu-item-title1">MARKET</div>
    </el-menu-item>
    <el-menu-item index="/solicit" class="menu-item">
      <div class="menu-item-title">剧本征集</div>
      <div class="menu-item-title1">COLLET</div>
    </el-menu-item>
    <!--中间搜索框-->
    <div class="search-box">
      <input type="text" v-model="input" placeholder="输入搜索内容...">
      <button class="search" @click="handleSearch">搜索</button>
    </div>
    <!-- <el-menu-item index="#" class="menu-item">
      <div class="menu-item-title">故事新编</div>
      <div class="menu-item-title1">NewlyOrganized</div>
    </el-menu-item>
    <el-menu-item index="#" class="menu-item">
      <div class="menu-item-title">写作技巧</div>
      <div class="menu-item-title1">WritingSkills</div>
    </el-menu-item> -->
    <div class="flex-grow" />
    <el-menu-item class="menu-item2" type="primary" @click="drawer2 = true">
      <!-- 消息按钮 -->
      <div v-if="token != ''" class="image-container" @click="goToMessage">
        <img src="../../public/images/xiaoxi.png" alt="" style="width: 40px;">
      </div>
    </el-menu-item>
    <el-menu-item @click="goToRegister" v-if="token == ''" class="menu-item2">注册</el-menu-item>
    <el-menu-item index="/login" v-if="token == ''" class="menu-item2" @click="goToLogin">登录</el-menu-item>
    <el-sub-menu index="5" v-if="token != ''">
      <template #title v-if="token != ''">
        <!--circleUrl 是头像图片的 URL-->
        <el-avatar size="large" :src="avatarUrl" @click="goToUserView" />
      </template>
      <!-- <el-menu-item @click="handleClick('/user')" v-if="token == ''">注册</el-menu-item> -->
      <!-- <el-menu-item index="/login" v-if="token == ''">登录</el-menu-item> -->
      <el-menu-item index="/myview" v-if="token != ''" @click="goToUserView">我的主页</el-menu-item>
      <el-menu-item index="/out" v-if="token != ''" @click="goOut">退出</el-menu-item>
    </el-sub-menu>
    <!-- 私信框 -->
    <!-- 私信框 -->
    <el-drawer v-model="drawer2" :direction="direction" size="auto">
      <!-- <template #header>
            <h4>会话框</h4>
        </template> -->

      <div class="container">
        <div class="list">
          <!-- <div v-if="duihua" class="list-item1">

                    <img :src="touxiangUrl" alt="" style="height: 50px;width: 50px;">
                    123456
                </div> -->
          <!-- <div class="label_title" >
                    <p>会话列表</p>
                </div> -->
          <div style="height: auto;overflow: auto;" width="100%">
            <div :class="curSessionId == item.conversation_id ? 'box_select' : 'box'"
              v-for="item in sessionList_already" :key="item.conversation_id">
              <!-- <img :src="'http://localhost:8080/api/images/' +item.avatar" alt="" style="height: 50px;width: 50px;"></img> -->
              <el-tooltip class="box-item" effect="dark" :content="item.list_name" placement="left">
                <el-badge v-if="item.un_read_count != 0" :value="item.un_read_count" :max="99" class="item"
                  :offset="[-13, 0]">
                  <img :src="'http://localhost:8080/api/images/' + item.headImg" alt=""
                    style="height: 50px;width: 50px;" @click="startSession(item)">
                </el-badge>

                <img v-else :src="'http://localhost:8080/api/images/' + item.headImg" alt=""
                  style="height: 50px;width: 50px;" @click="startSession(item)">
              </el-tooltip>

              <div class="search-box">
                <el-input v-model="input" placeholder="请输入搜索内容" class="custom-input" clearable />
                <button class="search-litle-box" @click="handleSearch">
                  <img src="../../public/images/search01.png" alt="Button Icon" style="width: 40px;height: 40px;" />
                </button>
              </div>
              <!-- <div class="box_left" @click="startSession(item)">
                            {{ item.list_name }}
                        </div> -->
              <div class="right_left">
                <!-- <div class="right_left_count">
                                {{ item.un_read_count }}
                            </div> -->
                <!-- <p @click="delSession(item.id)" class="right_left_del">X</p> -->
                <!-- <div class="right_left_del">
                                <i class="el-icon-close" @click="delSession(item.id)"></i>
                            </div> -->
              </div>
            </div>
          </div>

        </div>
        <div class="chat">
          <!-- 聊天对象 -->
          <div style="width: 100%;background-color: antiquewhite;text-align: center;height: 3%;"><span>{{
            toUname
          }}</span>
          </div>
          <!-- 聊天框 -->
          <div class="input">
            <div class="up" ref="messageContainer" id="msg_end">
              <!-- 加载效果 -->
              <div v-if="isLoading" class="loading">加载中...</div>
              <!-- 显示消息 -->
              <div v-for="(item, i) in list" :key="i">
                <!-- <div :class="item.senderId === curUserId ? 'msg_right_down' : 'msg_left_down'">
                                {{ item.mdata }}
                            </div>
                            <div>
                                <img src="../img/Logo.png" alt="" style="width: 25px;">
                            </div> -->
                <!-- 本人发送的消息 -->
                <div v-if="item.senderId === curUserId" class="msg_right msg">
                  <div class="msg_right_down">
                    <span v-if="isLink(item.mdata)">
                      <router-link class="no-underline" :to="getLink(item.mdata)">{{ getLinkText(item.mdata)
                        }}</router-link>
                    </span>
                    <span v-else>{{ item.mdata }}</span>
                  </div>
                  <div class="img_right">
                    <img :src="avatarUrl" alt="" style="width: 30px;">
                  </div>
                </div>
                <!-- 对方发送的消息 -->
                <div v-else class="msg_left msg">
                  <div class="img_left">
                    <img :src="'http://localhost:8080/api/images/' + item.avatar" alt="" style="width: 30px;">
                  </div>
                  <div class="msg_left_down">
                    <span v-if="isLink(item.mdata)">
                      <router-link class="no-underline" :to="getLink(item.mdata)">{{ getLinkText(item.mdata)
                        }}</router-link>
                    </span>
                    <span v-else>{{ item.mdata }}</span>
                  </div>
                </div>

              </div>
            </div>
          </div>
          <!-- 消息发送区 -->
          <!-- <div style="width: 100%;height: 4%;">
            <img src="../../public/images/hetong.png" style="width: 30px;height: 30px;margin-bottom: 2px"
              @click="GotoAgreementdeal">


          </div> -->
          <div class="send" style="height: 3%;">

            <el-input v-model="message" placeholder="请输入内容" class="input-with-select" @keyup.enter.native="sendMsg"
              :rows="9">
              <template #append>
                <el-button type="primary" @click="sendMsg">发送</el-button>
              </template>
            </el-input>
          </div>
        </div>

      </div>
      <el-empty :image-size="200" v-if="DataList" />

      <!-- <template #default>
        <div>
          <el-radio v-model="radio1" value="Option 1" size="large">
            Option 1
          </el-radio>
          <el-radio v-model="radio1" value="Option 2" size="large">
            Option 2
          </el-radio>
        </div>
      </template> -->
      <!-- <template #footer>
        <div style="flex: auto">
          <el-button @click="cancelClick">cancel</el-button>
          <el-button type="primary" @click="confirmClick">confirm</el-button>
        </div>
      </template> -->
    </el-drawer>

  </el-menu>
</template>

<script lang="ts" setup>
import { ref, nextTick, onMounted, inject, onBeforeUnmount, onUpdated } from 'vue';
import { useRouter, useRoute } from 'vue-router';
// import { ref, inject, reactive, onMounted } from 'vue';
import { useTokenStore } from '../stores/token'
import CryptoJS from 'crypto-js';
import { ElMessageBox, ElMessage } from 'element-plus'
import type { DrawerProps } from 'element-plus'
import { offset } from 'jodit/types/core/helpers';
// 获取 router 实例
const router = useRouter();
const route = useRoute()

// 创建 Token 状态管理 Store
const userStore = useTokenStore()
// 获取登录的 Token
const token = ref(userStore.getToken())
console.log("头部获取的token:" + token.value)

const axios = inject('axios'); // 注入 axios

const activeIndex = ref('/'); // 当前激活的菜单项

// 处理菜单项点击事件
const handleSelect = (index) => {
  // 更新当前激活的菜单项
  activeIndex.value = index;
  router.push(index);
  // }
};


const isLoading = ref(false); // 添加加载状态
const DataList = ref(false);

// 解密 token
function getToken() {
  const encryptedToken = localStorage.getItem('token');
  if (encryptedToken) {
    const secretKey = 'your_secret_key'; // 使用相同的密钥
    const bytes = CryptoJS.AES.decrypt(encryptedToken, secretKey);
    const decryptedToken = bytes.toString(CryptoJS.enc.Utf8);
    return decryptedToken;
  }
  return null;
}

const drawer2 = ref(false)
const direction = ref<DrawerProps['direction']>('rtl')
const radio1 = ref('Option 1')
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('Are you sure you want to close this?')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}
function cancelClick() {
  drawer2.value = false
}
function confirmClick() {
  ElMessageBox.confirm(`Are you confirm to chose ${radio1.value} ?`)
    .then(() => {
      drawer2.value = false
    })
    .catch(() => {
      // catch error
    })
}


//用户数据
const user = ref({})
// 使用 ref 来定义响应式变量
const avatarUrl = ref('');
//默认头像
// avatarUrl.value = '../../public/images/avatar.png'

const goToLogin = () => {
  //router.push({ name: 'User' }); // 使用路由名称
  router.push('/login')
}

const goToRegister = () => {
  //router.push({ name: 'User' }); // 使用路由名称
  router.push('/register')
}
const goOut = async () => {
  console.log('退出');
  //router.push({ name: 'User' }); // 使用路由名称
  //获取用户账号（唯一）
  const account = user.value.account;
  console.log("用户账号：" + account);
  curUserId.value = '';
  curUserName.value = '';
  // 检查用户名是否为空
  if (!account) {
    console.error("用户名为空");
    return; // 直接返回，如果用户名为空
  }
  try {
    const response = await axios({
      method: 'get',
      url: 'http://localhost:8080/loginOut', // 根据您的后端路径来更新
      headers: {
        Authorization: 'Bearer ' + token.value
      },
      params: { account: account } // 传递请求参数
    });
    // 处理响应
    if (response.data.code === 200) {
      console.log("退出成功", response.data.message);
      // 在成功退出后，可以重定向到用户登录页面或首页
      router.push('/out');
      console.log('退出完毕');
    } else {
      console.error("退出失败:", response.data.message);
    }
  } catch (error) {
    console.error("请求错误:", error);
  }


}
// 退出登录
const loginOut = () => {
  axios.get(`http://localhost:8080/loginOut?name=${curUserName.value}`)
    .then(response => {
      if (response.data.code === -1) {
        return $message.error(response.data.errDesc);
      }
      curUserId.value = '';
      curUserName.value = '';
      $message.success("退出登录成功");
    })
    .catch(error => {
      console.log(error);
    });
};

const goToUserView = () => {
  router.push({ name: 'User',params: { uid: curUserId.value} }); // 使用路由名称
  // router.push('/user')
}
//获取用户信息
function initUser() {
  console.log('获取用户信息')
  //判断用户是否登录
  //判断用户是否登录
  const Token = getToken();
  console.log('Token:' + Token)
  if (Token != '') {
    axios({
      method: 'get',
      url: 'http://localhost:8080/user/getuser',
      headers: {
        Authorization: 'Bearer ' + Token
      }
    })
      .then(function (response) {
        console.log("获取用户返回的数据：" + JSON.stringify(response, null, 2));

        if (response.data.code == '200') {
          user.value = response.data.user
          console.log("用户信息获取成功：" + JSON.stringify(response.data.user, null, 2))
          console.log("用户信息获取成功：" + response.data.user.uname)
          user.value = response.data.user
          curUserId.value = user.value.uid
          console.log("user.value:=====>" + user.value)
          // 仅在用户上传新头像后更新 headlmg
          console.log("user.headlmg:" + user.value.headlmg);

          if (user.value.headlmg) {
            avatarUrl.value = 'http://localhost:8080/api/images/' + user.value.headlmg; // 头像URL
            console.log("user.avater:" + avatarUrl.value);

          }

          // if(user.value.headlmg){
          //     dataForm.headlmg = user.value.headlmg; // 保留用户头像的值
          //     avatarUrl.value = 'http://localhost:8080/api/images/' + user.value.headlmg; // 头像URL
          // }
          console.log("user.headlmg:" + user.value.headlmg)
          // avatarUrl.value = '/svr/api/image/display/head/' + user.value.avatar
          //avatarUrl.value = 'http://localhost:8080/api/images/' + user.value.headlmg; // 头像URL 
          console.log("user.avater:" + avatarUrl.value)
          console.log("user:" + user.value)
        } else {
          console.log("获取用户失败，初始化头像");

          avatarUrl.value = 'D:\学习资料\毕业设计\项目\juben_clt\public\images\avatar.png'
        }
      })
      .catch(function (error) {
        console.log(error)
        console.log("过期：" + error.response.status)
        if (error.response.status == 401) {
          console.log("过期2：" + error.response.status)
          token.value = ''
          userStore.setToken('')

          // //提示
          // ElMessage({
          //   message: '请重新登录',
          //   type: 'success',
          //   plain: true
          // })
          // router.push('/login')
        }
      })
  }
}

const GotoAgreementdeal = async () => {


  //获取用户token
  const Token = getToken();
  //获取剧本id
  const wid = route.params.id as string;
  console.log("剧本id：" + wid);
  console.log("跳转合同签订页");
  const Work = work.value;
  console.log("Wid:" + JSON.stringify(Work, null, 2));

  //插入一条版权交易合同表记录
  const res = await axios.post(`http://localhost:8080/api/newTransaction`, Work, {
    headers: {
      'Authorization': 'Bearer ' + Token,
      'Content-Type': 'application/json',
    },

  })
    .then(response => {
      console.log('插入成功：', response.data);
      //跳转合同页
      console.log("跳转合同页");

      router.push({ path: '/agreementdeal', query: { id: wid } });
    })

}


/////////////////////////////////////////////////////////////////////////
//会话功能区域
// 声明变量
const dialogVisible = ref(false); // 对话框是否可见
const dialogTitle = ref('');    // 对话框标题
const loginName = ref('');  // 当前用户名
const message = ref("");  // 消息内容
// const list = ref([]);
const list = ref<{ senderId: string; senderName: string; mdata: string }[]>([]);
const curUserId = ref("");  // 当前用户ID
const curUserName = ref("");
const curSessionId = ref('');
const sessionList_already = ref([]);    // 已经存在的会话列表
const sessionList_not = ref([]);
const toUname = ref('');
//执行一次初始化
const startnum = ref(0);

// WebSocket实例
let websock: WebSocket | null = null;


// 使用 ref 来定义响应式变量
const input = ref('');

//输入框响应数据
// const message = ref('');

//搜索按钮点击事件
const handleSearch = () => {
  console.log('搜索内容：', input.value);
  if (input.value) {
    // 使用 Vue Router 导航到搜索结果页面，并传递搜索参数
    router.push({
      name: 'SearchResults',
      query: { search: input.value },
    });
  }
};

//输入框回车事件
const handleEnter = () => {
  // 发送消息
  sendMsg();
};

// 生命周期函数
onMounted(() => {
  // 页面创建相关逻辑

});

// 创建对消息容器的引用
const messageContainer = ref(null);

// 页面销毁时关闭WebSocket连接
onBeforeUnmount(() => {
  websocketclose();
});

// WebSocket相关方法
const initWebSocket = (userId: string, sessionId: string) => {
  console.log("在头部开始连接:" + user.value.uid + " | " + sessionId);

  websock = new WebSocket(`ws://localhost:8080/websocket/${user.value.uid}/${sessionId}`);
  websock.onopen = websocketonopen;
  websock.onerror = websocketonerror;
  websock.onmessage = websocketonmessage;
  websock.onclose = websocketclose;
};

const websocketonopen = () => {
  console.log("WebSocket连接成功");
};

const websocketonerror = (e: Event) => {
  console.log("WebSocket连接发生错误", e);
};
// 接收服务器消息
const websocketonmessage = (e) => {
  console.log("收到服务器内容：" + e.data);

  let data = JSON.parse(e.data);
  if (Array.isArray(data)) {
    // 列表数据
    sessionList_already.value = data;
    console.log("sessionList_already:" + sessionList_already);


  } else {
    // 消息数据
    list.value.push(data);
    console.log("list:" + list);
  }
};

const websocketclose = (e?: CloseEvent) => {
  if (!token.value) {
    console.error("用户未登录，无法开始会话");
    return; // 如果没有 token，直接返回
  }
  console.log(e);

  if (curUserId.value != null) {
    console.log("curSessionId.value-----------------：" + curSessionId.value);

    if (curSessionId.value != null) {
      if (curSessionId.value != null || curSessionId.value != '') {
        initWebSocket(curUserId.value, curSessionId.value);
      } else {
        initWebSocket(curUserId.value, 99999999);
      }
    }
  }
  console.log("connection closed===================", e);
};
// 滚动到最新消息
const scrollToBottom = () => {
  if (messageContainer.value) {
    nextTick(() => {
      messageContainer.value.scrollTop = messageContainer.value.scrollHeight; // 设置滚动位置为最新消息高度
    });
  }
};

// 消息发送
const sendMsg = () => {

  if (curSessionId.value === '') {
    return ElMessage.error("请选择左边的对话框开始聊天!");
  }

  console.log("发送内容:" + message.value);

  let data = {
    "senderId": curUserId.value,
    "senderName": curUserName.value,
    "mdata": message.value,
  };
  console.log("data:" + JSON.stringify(data));

  console.log("发送内容：" + message.value);


  list.value.push(data);
  //websock.send(JSON.stringify({ sessionId: sessionList_already.value.conversation_id, message: "Hello" }))


  websock.send(message.value); // 发送消息
  message.value = '';
  console.log("会话消息id" + curSessionId.value);
  // 发送完消息后滚动到最新消息
  scrollToBottom();
  // msgList(curSessionId.value);
};



// //// 用于自动滚动到最新消息
// onUpdated(() => {
//   console.log("onUpdated");
//   const elmnt = document.getElementById('msg_end');
//   if (elmnt) {
//     elmnt.scrollTop = elmnt.scrollHeight; // 滚动到最新消息
//   }
// });

const openDialog = (openName: string) => {
  dialogTitle.value = openName;
  dialogVisible.value = true;
};

// 获取可建立会话列表
const getSessionListNot = () => {
  axios.get(`http://localhost:8080/Conversation/not?userId=${curUserId.value}`)
    .then(response => {
      if (response.data.code === -1) {
        return ElMessage.error(response.data.errDesc);
      }
      sessionList_not.value = response.data.data;
    })
    .catch(error => {
      console.log(error);
    });
};

// 获取已存在的会话列表
const sessionListAlready = () => {
  DataList.value = true;
  // initUser;

  console.log("开始获取已存在的会话列表");
  console.log("获取已存在的会话列表||curUserId.value：" + curUserId.value);

  axios.get(`http://localhost:8080/Conversation/already?userId=${curUserId.value}`)
    .then(response => {
      if (response.data.code === -1) {
        return $message.error(response.data.errDesc);
      }
      sessionList_already.value = response.data.data;
      console.log("已存在的会话列表：" + JSON.stringify(response.data.data, null, 4));
      //获取最新消息，需要只进行一次获取
      if (sessionList_already.value.length > 0 && startnum.value == 0) {
        console.log("sessionList_already.value22222222222222222222222");

        const firstSessionId = sessionList_already.value[0].conversation_id;
        console.log("sessionList_already.value[0])::::::::" + sessionList_already.value[0]);

        startSession(sessionList_already.value[0]);
        msgList(firstSessionId); // 获取该会话的消息
        startnum.value = 1;
      }
      DataList.value = false;
    })
    .catch(error => {
      console.log(error);
    });
};

// 创建会话
const createSession = (toUserId: string, toUserName: string, avatar: string) => {
  console.log("curUserId.value：" + sessionList_already.value);

  axios.get(`http://localhost:8080/Conversation/createSession?userId=${curUserId.value}&toUserId=${toUserId}&toUserName=${toUserName}&avatar=${avatar}`)
    .then(response => {
      if (response.data.code === -1) {
        return $message.error(response.data.errDesc);
      }
      getSessionListNot();
      sessionListAlready();
    })
    .catch(error => {
      console.log(error);
    });
};

// 开始会话
const startSession = (item) => {

  if (!token.value) {
    console.error("用户未登录，无法开始会话");
    return; // 如果没有 token，直接返回
  }



  const sessionId = item.conversation_id;
  console.log("开始会话:" + sessionId);
  console.log("item:" + JSON.stringify(item));
  toUname.value = item.list_name;
  if (websock !== null) {
    websock.close();
  }
  curSessionId.value = sessionId;
  initWebSocket(curUserId.value, sessionId);
  msgList(sessionId);
  scrollToBottom();
};


// 删除会话
const delSession = (sessionId: string) => {
  axios.get(`http://localhost:8080/delSession?sessionId=${sessionId}`)
    .then(response => {
      if (response.data.code === -1) {
        return $message.error(response.data.errDesc);
      }
      getSessionListNot();
      sessionListAlready();
    })
    .catch(error => {
      console.log(error);
    });
};


// 获取消息数据
const msgList = (conversation_id: string) => {
  console.log(" 显示加载 ============================================================================================ true");
  isLoading.value = true; // 开始加载
  try {
    axios.get(`http://localhost:8080/getMessageList?sessionId=${conversation_id}`)
      .then(response => {
        if (response.data.code === -1) {
          return $message.error(response.data.errDesc);
        }
        list.value = response.data.data;
        console.log("获取消息数据：" + JSON.stringify(list.value, null, 4));

        // 从新获取列表
        sessionListAlready();

        // 在这里调用滚动到底部
        scrollToBottom();

      })
      .catch(error => {
        console.log(error);
      });
  } catch (error) {
    console.log(error);
  } finally {
    isLoading.value = false; // 结束加载
  }

};


// 判断消息是否为链接消息
const isLink = (mdata) => {
  try {
    const messageObj = JSON.parse(mdata);
    return messageObj.link !== undefined; // 如果存在 link 字段，则视为链接消息
  } catch (e) {
    return false; // 解析失败则认为不是链接
  }
};

// 获取链接
const getLink = (mdata) => {
  const messageObj = JSON.parse(mdata);
  return {
    path: messageObj.link.path,
    query: messageObj.link.query
  };
};

// 获取链接文本
const getLinkText = (mdata) => {
  const messageObj = JSON.parse(mdata);
  return messageObj.mdata; // 显示的文本可以根据需要选择
};

// 登录或注册
// const loginOrRegister = () => {
//     const thus = { dialogTitle, loginName, curUserId, curUserName, dialogVisible, sessionList_already, sessionList_not };

//     if (dialogTitle.value === "注册") {
//         axios.get(`http://localhost:8080/register?name=${loginName.value}`)
//             .then(response => {
//                 if (response.data.code === -1) {
//                     return $message.error(response.data.errDesc);
//                 }
//                 $message.success("注册成功");
//                 dialogVisible.value = false;
//             })
//             .catch(error => {
//                 console.log(error);
//             });
//     } else if (dialogTitle.value === '登录') {
//         axios.get(`http://localhost:8080/login?name=${loginName.value}`)
//             .then(response => {
//                 console.log(response.data);
//                 if (response.data.code === -1) {
//                     return $message.error(response.data.errDesc);
//                 }
//                 curUserId.value = response.data.data.id;
//                 curUserName.value = response.data.data.name;
//                 dialogVisible.value = false;
//                 getSessionListNot();
//                 sessionListAlready();
//                 startSession("99999999");
//             })
//             .catch(error => {
//                 console.log(error);
//             });
//     }
// };

//用户点击消息按钮
const goToMessage = async () => {
  drawer2.value = true;
  //进行循环，当curUserId.value的值不为空时才退出循环
  console.log("curUserId.value:" + curUserId.value);

  await sessionListAlready();   // 获取已存在的会话列表

  // await msgList;

  // 如果会话列表不为空，获取第一条会话的内容
  if (sessionList_already.value.length > 0) {
    console.log("sessionList_already.value11111:" + sessionList_already.value);

    const firstSessionId = sessionList_already.value[0].conversation_id;

    // 开始会话并获取消息
    await startSession(sessionList_already.value[0]);

    // 确保在获取消息后滚动到最新消息
    await msgList(firstSessionId); // 获取该会话的消息
  }


}












// 完成初始渲染并创建 DOM 节点后，进行页面加载
onMounted(() => {
  //初始化数据
  initUser()
})

// 初始化用户数据
onMounted(() => {
  initUser();
});
</script>


<style scoped>
.el-menu-demo {
  height: 80px;
  background-color: transparent;
  /* position: fixed; */
  z-index: 1000;
}

.flex-grow {
  flex-grow: 1;
}

.menu-item-title {
  width: 80px;
  height: 15px;
  /* background-color: red; */
  /* margin-top: 10px; */
  display: flex;
  /* 垂直居中 */
  justify-content: center;
  /* 文本在横向方向上居中 */
  align-items: center;
  /* 文本在垂直方向上居中 */
  /* flex: 1; */
  /* 弹性布局，使两个小盒子平分父容器的空间 */
  margin: 20px 5px 0px 5px;
  /* 外边距，避免边框重叠 */
  padding: 0px;
  padding-bottom: 18px;
}

.menu-item-title1 {
  width: 80px;
  height: 10px;
  font-size: 10px;
  /* background-color: red; */
  /* margin-top: 10px; */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 顶部对齐 */
  /* 文本在垂直方向上居中 */
  /* flex: 1; */
  /* 弹性布局，使两个小盒子平分父容器的空间 */
  margin: -5px 1px;
  /* 外边距，避免边框重叠 */
}

::v-deep .menu-item {
  display: flex;
  /* 使用flexbox布局 */
  flex-direction: column;
  /* 垂直排列内容 */
  justify-content: center;
  /* 垂直居中 */
  align-items: center;
  /* 水平居中 */
  width: 150px;
  /* 保持宽度一致 */
  height: 87px;
  /* 保持高度一致 */
  margin-top: -8px;
  font-size: 16px;
  /* 字体大小 */
  color: #fff;
  /* 字体颜色 */
  font: bold;
  transition: all 0.3s;
  /* 平滑过渡效果 */
}

::v-deep .menu-item1 {
  display: flex;
  /* 使用flexbox布局 */
  flex-direction: column;
  /* 子元素垂直排列 */
  justify-content: center;
  /* 垂直居中 */
  align-items: center;
  /* 水平居中 */
  width: 150px;
  height: 87px;
  margin-top: -8px;
  margin-left: 30px;
  font-size: 16px;
  /* 字体大小 */
  color: #ffffff;
  /* 字体颜色 */
  transition: all 0.3s;
  /* 平滑过渡效果 */
}

::v-deep .menu-item2 {
  width: 100px;
  height: 87px;
  margin-top: -8px;
  font-size: 16px;
  /* 字体大小 */
  /* font-weight: bold;    */
  color: #ffffff;
  /* 字体颜色 */
  transition: all 0.3s;
  /* 平滑过渡效果 */
}

/* 鼠标滑过样式 */
::v-deep .menu-item:hover {
  background-color: rgba(255, 255, 255, 0.8);
  /* 背景色变浅 */
  color: #c26712;
  /* 字体颜色变化 */
}

/* 假设的点击后样式，实际中可能需要JavaScript或Vue来控制添加active类 */
::v-deep .menu-item.is-active {
  /* background-color: #007bff; */
  /* 背景色变深 */
  color: #fff;
  /* 字体颜色变白 */
}

.el-avatar img {
  /* 这里的样式可能不会直接生效，取决于 Element UI 的具体实现 */
  width: 60%;
  /* 尝试修改图片的宽度 */
  height: auto;
  /* 保持图片的原始比例 */
}

.menu-item2 {
  display: flex;
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
  height: 98px;
  /* 使其占满菜单项的高度 */
}

.image-container {
  display: flex;
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
  height: 100%;
  /* 使其占满容器的高度 */
}

.drawer-box {
  /* background-color: #cf7070; */
}

.container {
  width: auto;
  display: flex;
  /* 设置为 flexbox */
  justify-content: flex-start;
  /* 控制项目对齐方式 */
  align-items: flex-start;
  /* 垂直对齐方式 */
  height: 100%;
}

.list {
  height: 60%;
  width: 65px;
}

.chat {
  /* height: 600px; */
  height: 100%;
  /* height: 300px; */
  width: auto;
  min-width: 450px;
  background-color: #060c36;

}

.input {
  width: auto;
  height: 93%;
  overflow: hidden;
  /* 隐藏默认滚动条 */
  position: relative;
  /* 用于绝对定位子元素 */
}

.list-item1 {
  width: 100%;
  height: 50px;
  background-color: #007bff;
  overflow-y: scroll;
  /* 允许垂直滚动 */
  margin-right: -17px;
  /* 如果需要，根据系统滚动条宽度调整 */
  padding-right: 17px;
  /* 添加右边距，防止内容被遮挡 */
}

.up::-webkit-scrollbar {
  display: none;
  /* Safari 和 Chrome */
}

.up {
  scrollbar-width: none;
  /* Firefox */
}

.msg_left {
  display: flex;
  /* 使用 Flexbox 布局 */
  align-items: center;
  /* 垂直居中对齐 */
  justify-content: flex-start;
  /* 水平靠左对齐 */
  margin-bottom: 10px;
  /* 消息之间的间距 */

  width: 385px;
  /* padding-left: 5px; */
  margin-top: 5px;
  /* border: 1px #1890ff solid; */
}

.msg_right {
  display: flex;
  /* 使用 Flexbox 布局 */
  align-items: center;
  /* 垂直居中对齐 */
  justify-content: flex-end;
  /* 水平靠右对齐 */
  margin-bottom: 10px;
  /* 消息之间的间距 */

  width: 385px;
  /* padding-right: 20px; */
  margin-top: 5px;
  /* border: 1px #1890ff solid; */
  text-align: right;
}

.up {
  overflow-y: auto;
  /* 允许溢出时显示垂直滚动条 */
  /* 你原本设置的背景色 */
  padding: 10px;
  /* 适量内边距建议 */
  /* height: 530px; */
  height: 100%;
}

.msg {
  width: 430px;
  margin-top: 5px;
}


.msg_right_down {
  background-color: #e1ffc7;
  /* 消息框的颜色 */
  padding: 5px;
  border-radius: 5px;
}

.msg_left_down {
  background-color: #fff3cd;
  /* 消息框的颜色 */
  padding: 5px;
  border-radius: 5px;
}

.img_right {
  margin-left: 10px;
  /* 图片与消息之间的间距 */
  width: 30px;
  margin-left: 10px;
  /* 图片与消息之间的间距 */
}

.img_left {
  margin-right: 10px;
  /* 图片与消息之间的间距 */
}


/* 会话列表 */
.box_select {
  width: 100%;
  height: 70px;
  /* padding: 1px 5px 1px 5px; */
  display: flex;
  /* justify-self: flex-end; */
  align-items: center;
  /* 垂直居中子元素（可选） */
  /* 添加底部边框 */
  /* border-bottom: 1px solid #123bde; */
  margin-bottom: 10px;
}

.box {
  width: 100%;
  height: 50px;
  /* padding: 1px 5px 1px 5px; */
  display: flex;
  /* justify-self: flex-end; */
  align-items: center;
  /* 垂直居中子元素（可选） */
  /* border-bottom: 1px solid #123bde; */
  margin-bottom: 10px;
}



.right_left_del {
  width: 20px;
  padding-left: 10px;
}

.box-item {
  width: 50px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.loading {
  text-align: center;
  padding: 20px;
  color: #888;
}

.loading::after {
  color: #ffffff;
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 3px solid #ccc;
  border-top: 3px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.no-underline {
  text-decoration: none;
  /* 去掉下划线 */
  /* color: inherit; 保持文本颜色继承父元素颜色 */
}

.search-box {
  display: flex; /* 使用弹性布局，使输入框和按钮水平对齐 */
    align-items: center; /* 垂直居中对齐 */
    max-width: 700px; /* 最大宽度 */
    margin: auto; /* 居中 */
    border-radius: 25px; /* 圆角 */
    overflow: hidden; /* 防止内容溢出 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影 */
}
.search-box input {
  flex: 0 0 500px; /* 设置固定宽度为500px */
    flex: 1; /* 输入框占满剩余空间 */
    border: none; /* 无边框 */
    width: 80%;
    padding: 10px 15px; /* 上下和左右内边距 */
    font-size: 16px; /* 字体大小 */
    border-radius: 25px; /* 圆角 */
    outline: none; /* 去掉聚焦时边框 */
    border-radius: 0; /* 右边不需要圆角 */
}

.search-box input::placeholder {
    color: #aaa; /* 占位符颜色 */
}

.search-box button {
    background-color: #007bff; /* 按钮背景颜色 */
    color: white; /* 字体颜色 */
    border: none; /* 无边框 */
    padding: 10px 15px; /* 内边距 */
    font-size: 16px; /* 字体大小 */
    cursor: pointer; /* 鼠标指针 */
    transition: background-color 0.3s; /* 背景颜色过渡 */
    border-radius: 0; /* 右边不需要圆角 */
}

.search-box button:hover {
    background-color: #0056b3; /* 悬停时按钮颜色 */
}

.search-box button:focus {
    outline: none; /* 去掉聚焦时边框 */
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>